<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>jQuery实例</title>
		<script type="text/javascript" src="../public/jquery-1.8.3.min.js"></script>
	</head>
	<body>
		<h3>jQuery实例--体验</h3>
		<ul>
			<li>10</li>
			<li>50</li>
			<li>30</li>
			<li>20</li>
			<li>40</li>
			<li>100</li>
		</ul>
		<script type="text/javascript">
			//使用jQuery将上面h3标题设置字体颜色为红色
			$("h3").css("color","red");
			
			//为上所有的li添加点击事件，在事件中实现li内容的输出.
			$("li").click(function(){
				alert($(this).html());
			}).mouseover(function(){ //添加鼠标移入事件处理
				$(this).css("background-color","#fc0");
			}).mouseout(function(){ //添加鼠标移出事件处理
				$(this).css("background-color","#fff");
			});
		</script>
	</body>
</html>

